$(function () {
    var loading = false;
    //分页允许返回的最大条数
    var maxItems = 999;
    //一页返回的最大条数
    var pageSize = 4;
    //获取帖子列表的url
    var listUrl = '/topic/topicListInfo';
    //获取帖子类型列表的url
    var topicCategoryUrl = '/topic/getTopicCategory';
    //页码
    var pageNum = 1;
    //从地址栏URL里尝试获取topicCategoryId
    var topicCategoryId = getQueryString('topicCategoryId');
    var topicName = '';


    getPersonInfo();
    //渲染出帖子类型以供搜索
    getSearchDivData();
    //预先加载10条帖子信息
    addItems(pageSize,pageNum,false);

    function getSearchDivData() {
        $.getJSON(topicCategoryUrl,function (data) {
            if (data.success){
                var topicCategoryList = data.data;
                var html = '';
                html += '<a href="#" class="button" data-category-id="">全部类别</a>';
                //遍历店铺类别列表,拼接出a标签集
                topicCategoryList.map(function (item,index) {
                    if (topicCategoryId!=''&&topicCategoryId==item.topicCategoryId){
                        html += '<a href="#" class="button button-fill" data-category-id='
                            +item.topicCategoryId+'>'
                            +item.topicCategoryName+'</a>';
                    }else {
                        html += '<a href="#" class="button" data-category-id='
                            +item.topicCategoryId+'>'
                            +item.topicCategoryName+'</a>';
                    }
                });
                //将拼接好的类别标签嵌入前台的html组件里
                $('#topiclist-search-div').html(html);
            }
        });
    }

    function addItems(pageSize, pageIndex,type) {
        //拼接出查询的url,赋空值默认就去掉这个条件限制,有值就代表按这个条件去筛选
        var url = listUrl+'?'+'pageIndex='+pageIndex+'&pageSize='
            +pageSize+'&topicCategoryId='+topicCategoryId+'&topicName='+topicName+'&type='+type;
        loading = true;
        //访问后台获取相应查询条件下的店铺列表
        $.getJSON(url,function (data) {
            console.log(data);
            if (data.success){
                //获取当前查询条件下店铺的总数
                maxItems = data.count;
                var html = '';
                //如果是搜索的话左上角显示话题的类型,如果是普通浏览则显示人名
                var head = '';
                //遍历动态列表,拼接出卡片集合
                if (null!=data.result.data){
                    data.result.data.map(function (item,index) {
                        if (type){
                            head = item.topicCategoryName;
                        } else {
                            head = item.personInfo.username;
                        }

                        var discuss = '';
                        var thumb  = '';
                        var collect = '';
                        if(item.topicDiscussNum!=''&&item.topicDiscussNum!=null){
                            discuss = '<span class="icon icon-message"></span>' + '&nbsp;'+item.topicDiscussNum+'&nbsp;&nbsp;';
                        }
                        if(item.topicThumbNum!=''&&item.topicThumbNum!=null){
                            thumb = '<span class="icon icon-emoji"></span>'+ '&nbsp;'+item.topicThumbNum+'&nbsp;&nbsp;';
                        }
                        if (item.topicCollectionNum != '' && item.topicCollectionNum != null) {
                            collect =  '<span class="icon icon-star"></span>'+ '&nbsp;'+item.topicCollectionNum+'&nbsp;&nbsp;';
                        }

                        html += ''+'<div class="card" data-topic-id="'
                            +item.topicId+'">'+'<div class="card-header">'
                            +head+'</div>'
                            +'<div class="card-content">'
                            +'<div class="list-block media-list">'+'<ul>'
                            +'<li class="item-content">'
                            +'<div class="item-inner">'
                            + '<div class="content-padded">' + item.topicName
                            + '</div>' + '</div>' + '</li>' + '</ul>'
                            + '</div>' + '</div>' + '<div class="card-footer">'
                            + '<span>'+new Date(item.createTime).Format("yyyy-MM-dd")+'</span>'
                            + '<div class="content-padded docs-icons">'+discuss+thumb+collect
                            +'</div>' + '</div>' + '</div>';
                    });
                }

                if (type && '' == data.result.data) {
                    var nbsp = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
                    html = '<span>' + nbsp + '抱歉,未找到相关结果</span>';
                }
                // }else if (!type && '' == data.result.data) {
                //     var nbsp = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
                //     html = '<span>'+nbsp+'话题列表为空</span>';
                // }

                //将卡片集合添加到目标HTML组件里
                $('.list-div').append(html);
                //获取目前为止已显示的卡片总数,包含之前已经加载的
                var total = $('.list-div .card').length;
                //若总数达到跟按照此条件查询列出来的总数一致,则停止后天的加载
                if(total>=maxItems){
                    $('.infinite-scroll-preloader').hide();
                }else {
                    $('.infinite-scroll-preloader').show();
                }
                //否则页码加1,继续load出新的店铺
                pageNum += 1;
                //加载结束,可以再次加载了
                loading = false;
                //刷新页面,显示新加载的店铺
                $.refreshScroller();
            }
        });
    }

    //下滑屏幕自动进行分页搜索
    $(document).on('infinite','.infinite-scroll-bottom',function () {
        if (loading)
            return;
        addItems(pageSize,pageNum,false);
    });

    //点击帖子的卡片进入该帖子的内容页面(等一下在实现)
    $('.topic-list').on('click','.card',function (e) {
        var topicId = e.currentTarget.dataset.topicId;
        // $.router.load('/probe/frontend/content?topicId='+topicId,true);
        window.location.href = '/topic/topicContent?topicId='+topicId;
    });

    //选择新的话题类别后,重置页码,请空原先的店铺列表,按照新的类别去查询
    $('#topiclist-search-div').on('click','.button',function (e) {
        topicCategoryId = e.target.dataset.categoryId;
        if ($(e.target).hasClass('button-fill')) {
            $(e.target).removeClass('button-fill');
            topicCategoryId = '';
        }else {
            $(e.target).addClass('button-fill').siblings().removeClass('button-fill');
        }
        //由于查询条件改变,清空店铺列表再进行查询
        $('.list-div').empty();
        //重置页码
        pageNum = 1;
        addItems(pageSize,pageNum,false);

    });

    //需要查询的店铺名字发生变化后,重置页码,清空原先的店铺列表,按照新的名字去排列
    $('#search').on('input',function (e) {
        topicName = e.target.value;
        $('.list-div').empty();
        pageNum=1;
        var flag = true;
        if (topicName == ''){
            flag = false;
        }
        addItems(pageSize,pageNum,flag);
    });

    $('#me').click(function () {
        $.openPanel('#panel-left-demo');
    });

    //初始化页面
    $.init();
});
